<!--The content below is only a placeholder and can be replaced.-->

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-10" (click)="first_button()">
  Button
</button>


<router-outlet></router-outlet>


<div class="h-32"></div>

<div class="flex md:items-center md:justify-center">
  <div class="max-w-sm rounded overflow-hidden shadow-lg inline-block w-1/4">
    <img class="w-full" src="https://tailwindcss.com//img/card-top.jpg" alt="Sunset in the mountains">

    <div class="px-6 py-4">
      <div class="font-bold text-black text-lg mb-2">The Coldest Sunnet</div>
      <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
        perferendis eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div class="px-6 py-4">
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#photography</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#travel</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm text-gray-700">#winter</span>
    </div>
  </div>

  <div class="max-w-sm rounded overflow-hidden shadow-lg inline-block ml-2 w-1/4">
    <img class="w-full" src="https://tailwindcss.com//img/card-top.jpg" alt="Sunset in the mountains">

    <div class="px-6 py-4">
      <div class="font-bold text-black text-lg mb-2">The Coldest Sunnet</div>
      <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
        perferendis eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div class="px-6 py-4">
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#photography</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#travel</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm text-gray-700">#winter</span>
    </div>
  </div>


  <div class="max-w-sm rounded overflow-hidden shadow-lg inline-block ml-2 w-1/4">
    <img class="w-full" src="https://tailwindcss.com//img/card-top.jpg" alt="Sunset in the mountains">

    <div class="px-6 py-4">
      <div class="font-bold text-black text-lg mb-2">The Coldest Sunnet</div>
      <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
        perferendis eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div class="px-6 py-4">
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#photography</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#travel</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm text-gray-700">#winter</span>
    </div>
  </div>

  <div class="max-w-sm rounded overflow-hidden shadow-lg inline-block ml-2 w-1/4">
    <img class="w-full" src="https://tailwindcss.com//img/card-top.jpg" alt="Sunset in the mountains">

    <div class="px-6 py-4">
      <div class="font-bold text-black text-lg mb-2">The Coldest Sunnet</div>
      <p class="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et
        perferendis eaque, exercitationem praesentium nihil.
      </p>
    </div>
    <div class="px-6 py-4">
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#photography</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm mr-2 text-gray-700">#travel</span>
      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm text-gray-700">#winter</span>
    </div>
  </div>





</div>


<hr>
<div class="flex md:items-center md:justify-center flex-wrap bg-gray-200 h-48">
  <div class="w-1/4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="w-1/4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="w-1/4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="w-1/4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
</div>



<span class="btn btn-blue">Button</span>
